<!DOCTYPE html>
<html>

	<head>

		<meta name="viewport" content="width=device-width-10, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
		<meta charset="utf-8" />

		<link rel="icon" href="https://dabai-1259760387.cos.ap-beijing.myqcloud.com/801%E5%B7%A5%E5%85%B7%E7%AE%B1/icon/801_256.ico" type="image/x-icon" />

		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<script src="js/bootstrap.js"></script>

		<meta charset="utf-8" />
		<title>扫码查看名片</title>

		<style type="text/css">
			body {
				text-align: center;
				padding: 16px;
			}
		</style>

	</head>

	<body>

		<div class="card">
			<div class="card-body">
				<h5 class="card-title">扫码查看名片</h5>
				<p class="card-text">

					<div class="input-group mb-3">
						<span class="input-group-text" id="basic-addon1">姓名</span>
						<input type="text" class="form-control" placeholder="如果不填，默认不显示" id="content1">
					</div>

					<div class="input-group mb-3">
						<span class="input-group-text" id="basic-addon1">号码</span>
						<input type="text" class="form-control" placeholder="输入号码进行制作" type="number" id="content3">
					</div>

			<div class="input-group mb-3">
						<span class="input-group-text" id="basic-addon1">自定义标题1</span>
						<input type="text" class="form-control" placeholder="如果不填，默认不显示" id="content5">
					</div>

					<div class="input-group mb-3">
						<span class="input-group-text" id="basic-addon1">自定义链接1</span>
						<input type="text" class="form-control" placeholder="输入链接进行制作" type="url" id="content6">
					</div>
					
				</p>

				<!-- Button trigger modal -->
				<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="run()">
制作二维码
</button>

				<!-- Modal -->
				<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<h1 class="modal-title fs-5" id="exampleModalLabel">这是您的链接</h1>
								<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
							</div>
							<div class="modal-body" id="content2">

							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
								<button type="button" class="btn btn-primary" onclick="openNewQr()">打开</button>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>

	</body>

	<script type="text/javascript">
		var str1 = "https://dabai2017.gitee.io/qr-call/qr?tel=";

		function run() {

			var edit1 = document.getElementById("content1");
			var edit2 = document.getElementById("content3");
			
			var edit5 = document.getElementById("content5");
			var edit6 = document.getElementById("content6");
			
			var tan = document.getElementById("content2");

			str1 = "https://dabai2017.gitee.io/qr-call/qr.html?name=" + encodeURI(edit1.value) + "&tel=" + edit2.value+ "&other1=" + edit5.value+ "&other1url=" + edit6.value;

			tan.innerText = str1;

		}

		function openNewQr() {
			window.open(str1);

		}
	</script>

</html>